<template>
  <div class="tree-node" :class="{ 
    selected: node.selected,
    'has-children': node.children && node.children.length > 0
  }">
    <div 
      class="node-content" 
      :style="{ paddingLeft: depth * 20 + 'px' }"
      @click="handleSelect"
    >
      <span 
        class="expand-icon" 
        @click.stop="handleToggle"
        v-if="node.children && node.children.length > 0"
      >
        {{ node.expanded ? '−' : '+' }}
      </span>
      <span class="node-icon">
        {{ node.children && node.children.length > 0 ? '📁' : '📄' }}
      </span>
      <span class="node-name">{{ node.name }}</span>
      <span class="node-badge" v-if="node.children && node.children.length > 0">
        {{ node.children.length }}
      </span>
    </div>
    
    <div 
      class="node-children" 
      v-if="node.expanded && node.children && node.children.length > 0"
    >
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :depth="depth + 1"
        @select="$emit('select', $event)"
        @toggle="$emit('toggle', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  node: {
    type: Object,
    required: true
  },
  depth: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['select', 'toggle']);

const handleSelect = () => {
  emit('select', props.node.id);
};

const handleToggle = () => {
  emit('toggle', props.node.id);
};
</script>

<style scoped>
.tree-node {
  margin: 2px 0;
}

.node-content {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.node-content:hover {
  background-color: #f5f5f5;
}

.tree-node.selected .node-content {
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: 500;
}

.expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-icon:hover {
  background-color: #e0e0e0;
}

.node-icon {
  margin-right: 8px;
  font-size: 14px;
}

.node-name {
  flex: 1;
  font-size: 14px;
}

.node-badge {
  background-color: #e0e0e0;
  color: #666;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 8px;
}

.node-children {
  margin-left: 16px;
  border-left: 1px dashed #e0e0e0;
}
</style>